import ExportWordC from '@/src/demo/ExportWord/ExportWordC';
import $ from '@/src/utils/exportWordFileModule/jquery';

import React from 'react';
import { Table, Divider } from 'antd/es';
import darkBlue from '@/src/assets/comps/other/firstHeader/title_icon_darkBlue.png';
import { PrimaryC, XYAxisChartsC } from '@/src/comps';
import fontSeizeToPT from '../fontSizeToPT.png';

export default class Atest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
        },
        {
          title: 'Action',
          key: 'action',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
      echartsSrc: undefined,
    };
  }

  componentDidMount() {
    // 涉及echarts导出 需要在挂载时通过ref获取当前图片
    this.setState({
      echartsSrc: this.echartsRef.echarts_instance.getDataURL(),
    });
  }

  handleDown = () => {
    const data = {
      fileName: '测试word', //文档名
      fileType: '.doc', //文档类型 type为"application/msword;charset=utf-8"时必须doc 如果需要使用docx需要修改为对应mime类型
      isHeader: true, //是否显示页眉  *xls  不要设置页眉页脚  改为false
      isFooter: true, //是否显示页脚  *xls  不要设置页眉页脚  改为false
      header: '我是页眉', //页眉标题
      footer: '我是页脚', //页脚标题
      //要导出的内容style, 模板字符串内css`.demo{margin: 0}`
      styles: `#tableExport table{
              width: 100%;
              color: #00A62F;
              height: 40px;
              line-height: 3;
              padding: 10px;
           }
           `,
      // updateExportCss: ``//需要修改导出的word样式  宽度高度 margin之类的
    };
    // 导出获取dom对象调用wordExport方法
    $('#demo')?.wordExport(data);
  };

  /**
   * 导出模板： 只在开发时显示供开发对比，不展示在页面时设置display: 'none'
   * @returns {JSX.Element}
   */
  modelHtmlRender = () => {
    const { echartsSrc } = this.state;
    return (
      <div id='demo' style={{ padding: '0', display: 'none' }}>
        <h1 style={{ textAlign: 'center' }}>测试导出word</h1>
        <h2>这是封面页</h2>
        {/*（1）word中插入文字，如何设置文字的颜色、大小、格式（首行缩进、行间距等）；*/}
        <div
          style={{
            textIndent: '38pt',
            lineHeight: 1.5,
            fontSize: '14pt',
            color: 'blue',
            textDecoration: 'underline',
            fontStyle: 'italic',
          }}
        >
          该段落测试首行缩进38pt为两个字，行间距，字体，颜色，下划线，文本删除线，斜体具体css与word格式对应关系见组件注释。接下来为占位文字---遇见很好的发挥了孙燕姿的嗓音特点，是其代表作之一。用简单的吉他和钢琴谱写了最优美的旋律，用明快的格调和略显无奈地情怀抒写了简洁的歌词。歌曲有些许伤感，但是又透露出坚强，透过对现实的无奈很容易勾起人的感情回忆，让人沉浸在爱情的怅惘意境中。
        </div>
        <h2 style={{ fontWeight: 'bold', color: 'red' }}>
          {/*行内设置 当前h2搭配width， height=20导出word视图合适*/}
          <img width={20} height={20} src={darkBlue} />
          带图片的标题
        </h2>
        <h1 style={{ pageBreakBefore: 'always' }}>这是第一页</h1>
        {/*内容居中用align={"center"}！！！！！！！！！！！！！！！！！！！1*/}
        <div>测试自动换页 - 下图是文本css字体大小与word内的对应关系</div>
        <div align={'center'}>
          <img src={fontSeizeToPT} alt='' />
        </div>
        <div align={'center'}>
          <img src={fontSeizeToPT} alt='' />
        </div>
        {/*自定义图片宽高， 注意图片的原始比例， 不会自动按比例缩放*/}
        <div>
          <img width='300px' height='140px' src={echartsSrc} alt='' />
        </div>
        <img src={echartsSrc} alt='' />
        <h6>content</h6>
        <p style={{ textAlign: 'center', pageBreakBefore: 'always' }}>这是第二页</p>
        <p style={{ textAlign: 'center' }}>第二页这是第一行</p>
        <div style={{ textAlign: 'center' }}>第二页这是第二行</div>
        {/*表格设置居中 外部套align={"center"}*/}
        <div align={'center'}>
          <Table id={'tableExport'} columns={this.state.columns} dataSource={this.state.dataSource} pagination={false} />
        </div>
      </div>
    );
  };

  /**
   * 显示渲染，供用户网页查看
   * @returns {JSX.Element}
   */
  viewHtmlRender = () => {
    const { echartsSrc } = this.state;
    let xAxis4 = ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06'];
    let series4 = [
      {
        name: '负债',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
      {
        name: '资产',
        data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
      },
    ];
    return (
      <div>
        {/*对应封面页*/}
        <div style={{ height: 800 }}>
          <h1 style={{ textAlign: 'center', fontSize: 30 }}>测试导出word</h1>
          <h2>这是封面页</h2>
          <div
            style={{
              textIndent: '38pt',
              lineHeight: 1.5,
              fontSize: '14pt',
              color: 'blue',
              textDecoration: 'underline',
              fontStyle: 'italic',
            }}
          >
            该段落测试首行缩进38pt为两个字，行间距，字体，颜色，下划线，文本删除线，斜体具体css与word格式对应关系见组件注释。接下来为占位文字---遇见很好的发挥了孙燕姿的嗓音特点，是其代表作之一。用简单的吉他和钢琴谱写了最优美的旋律，用明快的格调和略显无奈地情怀抒写了简洁的歌词。歌曲有些许伤感，但是又透露出坚强，透过对现实的无奈很容易勾起人的感情回忆，让人沉浸在爱情的怅惘意境中。
          </div>
          <h2 style={{ fontWeight: 'bold', color: 'red' }}>
            {/*行内设置 当前h2搭配width， height=20导出word视图合适*/}
            <img width={20} height={20} src={darkBlue} />
            带图片的标题
          </h2>
        </div>
        {/*第一页*/}
        <div style={{ textAlign: 'center' }}>我是页眉</div>
        <Divider />
        <div style={{ height: 1800 }}>
          <h1 style={{ pageBreakBefore: 'always' }}>这是第一页</h1>
          {/*内容居中用align={"center"}！！！！！！！！！！！！！！！！！！！1*/}
          <div>测试自动换页 - 下图是文本css字体大小与word内的对应关系</div>
          <div align={'center'}>
            <img src={fontSeizeToPT} alt='' />
          </div>
          <div align={'center'}>
            <img src={fontSeizeToPT} alt='' />
          </div>

          <div style={{ textAlign: 'center' }}>我是页脚</div>
          <div style={{ textAlign: 'center' }}>1/4</div>
          <Divider />
          <div style={{ textAlign: 'center' }}>我是页眉</div>

          {/*自定义图片宽高， 注意图片的原始比例， 不会自动按比例缩放*/}
          <div style={{ width: 300, height: 160, marginTop: 30 }}>
            <XYAxisChartsC
              ref={(ref) => (this.echartsRef = ref)}
              series={series4}
              xAxis={xAxis4}
              height={160}
              type='lineStack'
              markArea={[
                { range: ['01-01', '01-03'], color: '#EAF4D7' },
                { range: ['01-03', '01-04'], color: '#FBDEE1' },
                { range: ['01-04', '01-06'], color: '#FEF5D0' },
              ]}
            />
          </div>
          <XYAxisChartsC
            ref={(ref) => (this.echartsRef = ref)}
            series={series4}
            xAxis={xAxis4}
            height={400}
            type='lineStack'
            markArea={[
              { range: ['01-01', '01-03'], color: '#EAF4D7' },
              { range: ['01-03', '01-04'], color: '#FBDEE1' },
              { range: ['01-04', '01-06'], color: '#FEF5D0' },
            ]}
          />
          <h6>content</h6>
        </div>

        <div style={{ textAlign: 'center' }}>我是页脚</div>
        <div style={{ textAlign: 'center' }}>3/4</div>
        <Divider />
        <div style={{ textAlign: 'center' }}>我是页眉</div>

        {/*第二页*/}
        <div style={{ height: 800 }}>
          <p style={{ textAlign: 'center', pageBreakBefore: 'always', paddingBottom: 80 }}>这是第二页</p>
          <p style={{ textAlign: 'center' }}>第二页这是第一行</p>
          <div style={{ textAlign: 'center' }}>第二页这是第二行</div>
          {/*表格设置居中 外部套align={"center"}*/}
          <div align={'center'}>
            <Table id={'tableExport'} columns={this.state.columns} dataSource={this.state.dataSource} pagination={false} />
          </div>
        </div>
        <div style={{ textAlign: 'center' }}>我是页脚</div>
        <div style={{ textAlign: 'center' }}>3/4</div>
      </div>
    );
  };
  render() {
    return (
      <div style={{ minWidth: 550, margin: '0 auto', width: 550 }}>
        <PrimaryC title={'下载'} onClick={this.handleDown}></PrimaryC>
        {this.modelHtmlRender()}

        <ExportWordC>{this.viewHtmlRender()}</ExportWordC>
      </div>
    );
  }
}
